import React, {useEffect, useMemo, useState} from 'react'
import './index.scss'
import {PageHeader, Button, Descriptions, message, List, Tag, Statistic, Card} from 'antd';
import {useParams} from "react-router-dom/cjs/react-router-dom";
import Axios from "../../utils/Axios";
import {useHistory} from "react-router-dom";

const statusColor1 = 'green'
const statusColor2 = 'red'
export default function UserAttPage() {
  const params = useParams()
  const history = useHistory()
  const [userAttHistory, setUserAttHistory] = useState([])
  const [groupInfo, setGroupInfo] = useState({})

  const [att, setAtt] = useState(0)
  const [noAtt, setNoAtt] = useState(0)
  const attPercent = useMemo(() => {
    if (userAttHistory.length === 0) return 0
    return att / userAttHistory.length
  }, [att, userAttHistory])
  useEffect(() => {
    for (const item of userAttHistory) {
      if (item.status === '旷课') setNoAtt(noAtt => noAtt + 1)
      else setAtt(att => att + 1)
    }
  }, [userAttHistory])

  useEffect(() => {
    const getUserAttendancesByGroup = async () => {
      const res = await Axios.get(`/user/getUserAttendancesByGroup/${params.id}`)
      if (res.data.code === 200) {
        setUserAttHistory(res.data.data)
      }
    }
    const getGroupInfo = async () => {
      const res = await Axios.get(`/user/userGroup/${params.id}`)
      if (res.data.code === 200) {
        console.log(res.data.data)
        setGroupInfo(res.data.data)
      }
    }
    getGroupInfo()

    getUserAttendancesByGroup()
  }, [params.id])
  /*
  类型：请求
  作用：用户退出考勤组
   */
  const leaveGroup = () => {
    try {
      Axios.post(`/user/leaveGroup/${params.id}`)
        .then(res => {
          if (res.data.code === 200) {
            message.success(res.data.msg)
            history.goBack()
          }
        })
    } catch (e) {
      throw e
    }
  }
  return (
    <div className="user-att-page">

      <div className="user-att-box">
        <div className="att-header">
          <PageHeader
            ghost={false}
            title={groupInfo.name ? groupInfo.name : '未知组名'}
            subTitle={groupInfo.description === 'null' ? '' : groupInfo.description}
            extra={[
              <Tag color="#55acee">{groupInfo.code ? groupInfo.code : '000000'}</Tag>,
              <Button key="1" danger onClick={leaveGroup}>
                退出考勤组
              </Button>,
            ]}
          >
            <Descriptions size="small" column={3}>
              <Descriptions.Item label="组长">{groupInfo.adminName}</Descriptions.Item>
              <Descriptions.Item label="总人数">{groupInfo.count}</Descriptions.Item>
            </Descriptions>
          </PageHeader>
        </div>
        <div className="att-user-allinfo">
          <Card>
            <Statistic
              title="出勤"
              value={att}
              valueStyle={{color: '#3f8600'}}
            />
          </Card>
          <Card>
            <Statistic
              title="旷课"
              value={noAtt}
              valueStyle={{color: '#cf1322'}}
            />
          </Card>
          <Card>
            <Statistic
              title="出勤率"
              value={attPercent}
              valueStyle={{color: '#f50'}}
              precision={2}
              suffix="%"
            />
          </Card>
        </div>
        <div className="att-list">
          <List
            bordered
            dataSource={userAttHistory}
            size="large"
            renderItem={item => (
              <List.Item>
                <div style={{width: 220}}>{item.description}</div>
                <div style={{width: 200}}>{item.attendanceTime}</div>
                <div className="att-list-status"
                     style={{color: item.status === '旷课' ? statusColor2 : statusColor1}}>{item.status}</div>
              </List.Item>
            )}
          />
        </div>

      </div>
    </div>
  )
}